import React, { useState } from "react";
import {
  Card,
  Typography,
  Space,
  Slider,
  Select,
  Switch,
  Radio,
  Drawer,
  List,
} from "antd";
import { User as UserInfo } from "../types/user";

import AvatarGroup from "../components/AvatarGroup";
import UserAvatar from "../components/UserAvatar";
import { mockUsers } from "../mock/data/treeData";

const { Title, Paragraph, Text } = Typography;
const { Option } = Select;

// 用户数组分片，用于显示不同规模的团队
const smallTeam = mockUsers.slice(0, 4);
const mediumTeam = mockUsers.slice(0, 7);
const largeTeam = mockUsers;

// 预设颜色方案
const colorSchemes = {
  default: [
    "#1677ff",
    "#52c41a",
    "#fa8c16",
    "#eb2f96",
    "#722ed1",
    "#13c2c2",
    "#faad14",
    "#f5222d",
  ],
  pastel: [
    "#BDCDD6",
    "#ECC9EE",
    "#9ED2BE",
    "#FFDAAF",
    "#AEBDCA",
    "#DFCCFB",
    "#FAD3E7",
    "#CDF0EA",
  ],
};

const AvatarGroupDemo: React.FC = () => {
  const [maxCount, setMaxCount] = useState(8);
  const [size, setSize] = useState<any>("default");
  const [gap, setGap] = useState(-8);
  const [useAbbreviation, setUseAbbreviation] = useState(false);
  const [selectedUsers, setSelectedUsers] = useState<UserInfo[]>(largeTeam);
  const [colorScheme, setColorScheme] =
    useState<keyof typeof colorSchemes>("default");
  const [drawerVisible, setDrawerVisible] = useState(false);
  const [drawerUsers, setDrawerUsers] = useState<UserInfo[]>([]);
  const [showBorder, setShowBorder] = useState(false); // 添加边框控制状态

  // 显示"更多"用户的抽屉
  const handleShowMoreUsers = (users: UserInfo[]) => {
    setDrawerUsers(users);
    setDrawerVisible(true);
  };

  // 点击单个头像的处理函数
  const handleAvatarClick = (user: UserInfo) => {
    console.log("点击头像:", user);
  };

  return (
    <div style={{ padding: "24px" }}>
      <Title level={2}>团队成员头像组</Title>
      <Paragraph>
        显示一组团队成员的纯色头像，支持设置最大显示数量、头像大小、重叠距离等，超出数量显示"..."。
      </Paragraph>

      <Card title="配置示例" style={{ marginBottom: "24px" }}>
        <Space direction="vertical" style={{ width: "100%" }}>
          <div style={{ marginBottom: "24px" }}>
            <Title level={4}>预览</Title>
            <div
              style={{
                padding: "24px",
                background: "#f5f5f5",
                borderRadius: "8px",
              }}
            >
              <AvatarGroup
                users={selectedUsers}
                maxCount={maxCount}
                size={size}
                gap={gap}
                useAbbreviation={useAbbreviation}
                onMoreClick={handleShowMoreUsers}
                onAvatarClick={handleAvatarClick}
                colors={colorSchemes[colorScheme]}
                showBorder={showBorder}
              />
            </div>
          </div>

          <div style={{ display: "flex", flexWrap: "wrap", gap: "16px" }}>
            <div style={{ minWidth: "250px", flex: "1" }}>
              <div style={{ marginBottom: "8px" }}>用户数量</div>
              <Radio.Group
                value={selectedUsers.length}
                onChange={(e) => {
                  switch (e.target.value) {
                    case 4:
                      setSelectedUsers(smallTeam);
                      break;
                    case 7:
                      setSelectedUsers(mediumTeam);
                      break;
                    default:
                      setSelectedUsers(largeTeam);
                  }
                }}
              >
                <Radio.Button value={4}>小团队 (4人)</Radio.Button>
                <Radio.Button value={7}>中等团队 (7人)</Radio.Button>
                <Radio.Button value={12}>大团队 (12人)</Radio.Button>
              </Radio.Group>
            </div>

            <div style={{ minWidth: "250px", flex: "1" }}>
              <div style={{ marginBottom: "8px" }}>最大显示数量</div>
              <Slider
                min={1}
                max={10}
                value={maxCount}
                onChange={setMaxCount}
                marks={{ 1: "1", 5: "5", 10: "10" }}
              />
            </div>

            <div style={{ minWidth: "250px", flex: "1" }}>
              <div style={{ marginBottom: "8px" }}>头像大小</div>
              <Select value={size} onChange={setSize} style={{ width: "100%" }}>
                <Option value="small">小 (24px)</Option>
                <Option value="default">默认 (40px)</Option>
                <Option value="large">大 (60px)</Option>
              </Select>
            </div>

            <div style={{ minWidth: "250px", flex: "1" }}>
              <div style={{ marginBottom: "8px" }}>重叠距离 ({gap}px)</div>
              <Slider
                min={-20}
                max={10}
                value={gap}
                onChange={setGap}
                marks={{ "-20": "-20", "0": "0", "10": "10" }}
              />
            </div>

            <div style={{ minWidth: "250px", flex: "1" }}>
              <div style={{ marginBottom: "8px" }}>颜色方案</div>
              <Radio.Group
                value={colorScheme}
                onChange={(e) => setColorScheme(e.target.value)}
              >
                <Radio value="default">默认</Radio>
                <Radio value="pastel">柔和色</Radio>
              </Radio.Group>
            </div>

            <div style={{ minWidth: "250px", flex: "1" }}>
              <div style={{ marginBottom: "8px" }}>使用姓名缩写</div>
              <Switch checked={useAbbreviation} onChange={setUseAbbreviation} />
            </div>

            <div style={{ minWidth: "250px", flex: "1" }}>
              <div style={{ marginBottom: "8px" }}>显示边框</div>
              <Switch checked={showBorder} onChange={setShowBorder} />
            </div>
          </div>
        </Space>
      </Card>

      <Card title="使用场景示例">
        <Space direction="vertical" style={{ width: "100%" }}>
          <Card
            size="small"
            title="团队成员列表"
            style={{ marginBottom: "16px" }}
          >
            <div
              style={{
                display: "flex",
                alignItems: "center",
                justifyContent: "space-between",
              }}
            >
              <Text strong>项目开发团队</Text>
              <AvatarGroup
                users={largeTeam}
                maxCount={5}
                size="small"
                gap={-4}
                onMoreClick={handleShowMoreUsers}
              />
            </div>
          </Card>

          <Card size="small" title="协作文档">
            <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
              <Text>当前查看者:</Text>
              <AvatarGroup users={smallTeam} size="small" gap={-4} />
            </div>
          </Card>
        </Space>
      </Card>

      <Card title="API说明" style={{ marginTop: "24px" }}>
        <pre
          style={{
            background: "#f5f5f5",
            padding: "16px",
            borderRadius: "4px",
          }}
        >
          {`import AvatarGroup from '@/components/AvatarGroup';

// 基本用法
<AvatarGroup 
  users={teamMembers}
  maxCount={5}
  size="default"
  gap={-8}
  onMoreClick={handleShowMoreUsers}
  onAvatarClick={handleAvatarClick}
  showBorder={false}
/>

// 属性说明
interface AvatarGroupProps {
  users: UserInfo[];          // 用户列表 (只需要id和name)
  maxCount?: number;          // 最大显示头像数量，默认8
  size?: 'small' | 'default' | 'large' | number;  // 头像尺寸
  shape?: 'circle' | 'square'; // 头像形状，默认圆形
  gap?: number;               // 头像间距，负值表示重叠
  useAbbreviation?: boolean;  // 是否使用姓名缩写
  showBorder?: boolean;       // 是否显示头像边框
  onAvatarClick?: (user, index) => void;  // 头像点击回调
  onMoreClick?: (restUsers) => void;      // 点击更多头像回调
  colors?: string[] | string; // 背景颜色配置
}

// 用户数据结构
interface UserInfo {
  id: string;   // 用户ID
  name: string; // 用户名称
}`}
        </pre>
      </Card>

      {/* 显示更多用户的抽屉 */}
      <Drawer
        title="更多团队成员"
        placement="right"
        onClose={() => setDrawerVisible(false)}
        open={drawerVisible}
        width={320}
      >
        <List
          itemLayout="horizontal"
          dataSource={drawerUsers}
          renderItem={(user) => (
            <List.Item>
              <List.Item.Meta
                avatar={
                  <UserAvatar
                    name={user.name}
                    size="default"
                    useAbbreviation={useAbbreviation}
                  />
                }
                title={user.name}
                description={`ID: ${user.id}`}
              />
            </List.Item>
          )}
        />
      </Drawer>
    </div>
  );
};

export default AvatarGroupDemo;
